<!--  -->
<template>
  <el-dialog
    v-model="showEditDialog"
    title="编辑秒杀商品信息"
    width="40%"
    @close="emit('hide')"
  >
    <div class="formBox">
      <el-form
        label-position="right"
        :model="EditFlashGoodsInfo"
        label-width="100px"
        style="width: 300px"
      >
        <el-form-item label="商品名称：">
          {{ EditFlashGoodsInfo?.product.name }}
        </el-form-item>
        <el-form-item label="货号：">
          {{ "NO. " }}
        </el-form-item>
        <el-form-item label="商品价格：">
          {{ "¥ " + EditFlashGoodsInfo?.product.price }}
        </el-form-item>
        <el-form-item label="秒杀价格：">
          <div class="FlashPrice">
            <span class="rmb">¥</span
            ><el-input v-model="EditFlashGoodsInfo!.flashPromotionPrice" />
          </div>
        </el-form-item>
        <el-form-item label="剩余数量：">
          {{ EditFlashGoodsInfo?.product.stock }}
        </el-form-item>
        <el-form-item label="秒杀数量：">
          <el-input v-model="EditFlashGoodsInfo!.flashPromotionCount" />
        </el-form-item>
        <el-form-item label="限购数量：">
          <el-input v-model="EditFlashGoodsInfo!.flashPromotionLimit" />
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="EditFlashGoodsInfo!.sort" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('hide')">取消</el-button>
        <el-button type="primary" @click="submit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { defineProps, reactive, toRefs, ref, watch, defineEmits } from "vue";
import {
    getFlashProductRelationApi,
    updateFlashProductRelationApi,
} from "../api";

interface IProps {
  show: boolean;
  id: number;
  data: IFlashProductRelationList;
}

const props = withDefaults(defineProps<IProps>(), {
  show: false,
  id: 0,
});

const emit = defineEmits(["hide", "getList"]);

const showEditDialog = ref<boolean>(false);

watch(
  () => props.show,
  () => {
    showEditDialog.value = props.show;
  }
);

const EditFlashGoodsInfo = ref<IFlashProductRelationList>();

// 获取详情接口
const editId = ref<number>(0);
watch(
  () => props.id,
  () => {
    editId.value = props.id;
    // Object.assign(EditFlashGoodsInfo.value,props.data)
    EditFlashGoodsInfo.value = props.data;
  }
);

// 提交
const submit = () => {
  ElMessageBox.confirm("是否确认编辑", "提示", {
    cancelButtonText: "取消",
    confirmButtonText: "确认",
    type: "warning",
  }).then(() => {
    updateFlashProductRelationApi(
      EditFlashGoodsInfo.value as IFlashProductRelationList
    ).then((res) => {
      if (res.code === 200) {
        // 提示
        ElMessage.success("修改成功");
        // 隐藏
        emit("hide");
        //更新列表
        emit("getList");
      } else {
        ElMessage.success("修改失败");
        // 隐藏
        emit("hide");
        //更新列表
        emit("getList");
      }
    });
  });
};
</script>
<style lang="less" scoped>
.FlashPrice {
  display: flex;
  justify-content: space-between;
  .rmb {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 4px 0 0 4px;
    border-right: none;
  }
  :deep(.el-input__wrapper) {
    border-radius: 0 4px 4px 0;
  }
}
.formBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
